<template>
	<view class="page">
		<!-- 聊天记录 -->
		<view class="message-box">
			123
		</view>
		
		<!-- 底部聊天框 -->
		<view class="input-box" :style="{marginBottom:keyboardHeight+'px'}">
			<view class="voice">
				<image @click="handleSwitchChatType('voice')" v-if="chatType == 'keyboard'" src="../../static/icons/message/yuyin.png" mode=""></image>
				<image @click="handleSwitchChatType('keyboard')" v-if="chatType == 'voice'" src="../../static/icons/message/jianpan.png" mode=""></image>
			</view>
			<view class="content">
				<view v-if="chatType == 'keyboard'" class="content-input content-style">
					<input confirm-type="send" :adjust-position="false" v-model="contentValue" @input="handleInput" type="text" placeholder="请输入内容">
				</view>
				<view v-if="chatType == 'voice'" class="content-voice content-style">
					<input placeholder-class="content-voice-placeholderStyle" type="button" value="按住说话">
				</view>
			</view>
			<view class="tool">
				<image src="../../static/icons/message/xiaolianhaoping.png" mode=""></image>
				<image src="../../static/icons/message/jiahao.png" mode=""></image>
			</view>
		</view>
		
		<!-- 功能 -->
		<view class="tool-box">
			<!-- 表情 -->
			<view class="tool-box-item">
				123
			</view>
			<!-- 面板 -->
			<view class="tool-box-item">
				456
			</view>
		</view>
	</view>
</template>

<script setup>
import {onLoad, onNavigationBarButtonTap} from "@dcloudio/uni-app"
import {ref} from "vue"
let keyboardHeight = ref(0)
let chatType = ref('keyboard')
let contentValue = ref("")
let sessionType = ref(1)

// 设置导航栏标题
function setNavBarTitle(title) {
	uni.setNavigationBarTitle({
		title:title,
		fail:function(){
			uni.showToast({
				title:"出现异常",
				icon:"error"
			})
			uni.navigateBack()
		}
	})
}

onLoad((options)=>{
	setNavBarTitle(options.title)
	sessionType.value = options.sessionType
	console.log(options)
	uni.onKeyboardHeightChange((res) => {
		console.log(res)
		if(res.height == 0) {
			keyboardHeight.value = 0
		}else{
			keyboardHeight.value = res.height
		}
	})
})
function handleInput(){
	
}
function handleSwitchChatType(status) {
	console.log(status)
	chatType.value = status
}
onNavigationBarButtonTap(function(evt) {
	console.log(evt)
	if(evt.float == "right"){
		if(sessionType.value == 1) {
			uni.navigateTo({
				url:"/pagesA/messageSetting/index"
			})
		}else if(sessionType.value == 2) {
			uni.navigateTo({
				url:"/pagesA/groupSetting/index"
			})
		}else{
			uni.showToast({
				title:"异常错误",
				icon:"error"
			})
			uni.navigateBack()
		}
	}
})
</script>

<style>
	page {
		background-color: #eee;
	}
</style>

<style lang="scss" scoped>


.input-box{
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: row;
	background-color: #ffffff;
	padding: 35rpx 20rpx 35rpx 20rpx;
	.voice{
		align-self: center;
		width: 13%;
		display: flex;
		flex-direction: row;
		image{
			width: 65rpx;
			height: 65rpx;
		}
	}
	.content {
		align-self: center;
		width: 60%;
		.content-style{
			width: 100%;
			border-radius: 20px;
			background-color: #eee;
			input:nth-of-type(1){
				padding-left: 20rpx;
				padding-right: 20rpx;
			}
			input:nth-of-type(2){
				background-color: red;
			}
		}
		.content-input{

			padding: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.content-voice{
			padding: 10rpx 0 10rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.content-voice-placeholderStyle{
			// text-align: center;
			color: gray;
		}
	}
	.tool {
		align-self: center;
		width: 27%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		image{
			align-self: center;
			width: 60rpx;
			height: 60rpx;
		}
		image:nth-of-type(1) {
			margin-left: 10rpx;
		}
		image:nth-of-type(2) {
			margin-left: 10rpx;
		}
		text {
			align-self: center;
			margin-left: 10rpx;
			color: $u-primary;
		}
	}
}
</style>